<template>
	<view class="box" v-if="userInfo">
		<view class="first" @click="onUpload">
			<view class="view1">头像</view>
			<view class="view2">
				<image :src="userInfo.CyrappUserInfo.avatar || '../../static/tx.png'" class="viewImg" />
				<uni-icons type="right" size="15" color="#999"></uni-icons>
			</view>
		</view>
		<view class="first" @click="onNav('/pages/changeName/index')">
			<view class="view1">昵称</view>
			<view class="view2">
				<view class="view3">{{userInfo.CyrappUserInfo.nickName}}</view>
				<uni-icons type="right" size="15" color="#999"></uni-icons>
			</view>
		</view>
		<view class="first">
			<view class="view1">ID号</view>
			<view class="view2">
				<view class="view3">{{userInfo.CyrappUserInfo.clientUserId}}</view>
			</view>
		</view>
		<view class="first1">
			<view class="view1">手机号</view>
			<view class="view2">
				<view class="view3">{{userInfo.CyrappUserInfo.phone}}</view>
			</view>
		</view>
		<!-- <u-top-tips ref="uTips"></u-top-tips> -->
		<u-top-tips ref="uTips" :zIndex="5">
			<view class="moneyTips">
				<view class="left">
					<view class="title">权限使用说明</view>
					<view class="subtitle">头像照片仅用于头像展示，方便用户查看自己的信息。为了可以上传头像，请开启相机和相册权限</view>
				</view>
			</view>
		</u-top-tips>
		<!-- <u-popup v-model="showPopup" class="popup">
			<view class="title">权限使用提示</view>
			<view class="subtitle">
				头像照片仅用于头像展示，方便用户查看自己的信息。为了可以上传头像，请开启相机和相册权限
			</view>
		</u-popup> -->
	</view>
</template>

<script>
	import {
		updateAvatar,
		updateNickName
	} from '../../api/common';
	import {
		getUserInfo
	} from '../../api/login';
	import {
		uploadImageOne
	} from '../../utils/request'
	export default {
		components: {},
		onLoad(option) {},
		data() {
			return {
				imageSrc: '',
				userInfo: null,
				showPopup: false
			}
		},
		onShow() {
			this.getUserDetail();
			uni.$on('updateName', async (params) => {
				await updateNickName(params);
				this.getUserDetail();
			})
		},
		methods: {
			getUserDetail() {
				getUserInfo().then(({
					data
				}) => {
					this.userInfo = data;
				})
			},
			onUpload() {
				let that = this;
				this.$refs.uTips.show({
					duation: 3500
				})
				uploadImageOne('wx/common/upload', async ({
					url
				}) => {
					await updateAvatar({
						avatar: url
					});
					that.getUserDetail();
				});
				// uni.showActionSheet({
				// 	itemList: ['拍摄', '从相册选择'],
				// 	success(res) {
				// 		console.log(res)
				// 		if (res.tapIndex == 0) {
				// 			uni.showModal({
				// 				title: '上传头像需要下列权限才可以正常使用',
				// 				content: '摄像头权限(拍摄t头像)',
				// 				success: function(res) {
				// 					if (res.confirm) {
				// 						uploadImageOne({
				// 							url: 'wx/common/upload',
				// 							sourceType: ['camera'],
				// 						}, async ({
				// 							url
				// 						}) => {
				// 							await updateAvatar({
				// 								avatar: url
				// 							});
				// 							that.getUserDetail();
				// 						})
				// 					}
				// 				}
				// 			});
				// 		} else {
				// 			uni.showModal({
				// 				title: '上传头像需要下列权限才可以正常使用',
				// 				content: '存储权限(读取相册头像)',
				// 				success: function(res) {
				// 					if (res.confirm) {
				// 						uploadImageOne({
				// 							url: 'wx/common/upload',
				// 							sourceType: ['album'],
				// 						}, async ({
				// 							url
				// 						}) => {
				// 							await updateAvatar({
				// 								avatar: url
				// 							});
				// 							that.getUserDetail();
				// 						})
				// 					}
				// 				}
				// 			});
				// 		}
				// 	}
				// })
				// uni.showModal({
				// 	title: '上传头像需要下列权限才可以正常使用',
				// 	content: '存储权限(读取相册照片)和摄像头权限(拍摄头像)',
				// 	success: function(res) {
				// 		if (res.confirm) {
				// 			uploadImageOne('wx/common/upload', async ({
				// 				url
				// 			}) => {
				// 				await updateAvatar({
				// 					avatar: url
				// 				});
				// 				that.getUserDetail();
				// 			});
				// 		}
				// 	}
				// });
			},
			onNav(url) {
				uni.navigateTo({
					url
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	.moneyTips {
		width: 718rpx;
		// height: 128rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 24rpx;

		.title {
			font-size: 24rpx;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: #999999;
			margin-bottom: 24rpx;
		}

		.subtitle {
			font-size: 32rpx;
			font-family: PingFangSC-Semibold;
			font-weight: 600;
			color: #1F1F1F;
		}

		image {
			width: 104rpx;
			height: 80rpx;
		}
	}

	@import './index.less';
</style>